<script setup lang="ts">
import type {
  CascaderNodeModel,
  CascaderRegionModel,
  LevelSiderBarType,
} from '../types'
import LevelRow from './LevelRow.vue'
import LevelSiderBar from './LevelSiderBar.vue'

const emit = defineEmits<IEmits>()

const region = defineModel<CascaderRegionModel>('region', { required: true })

const levelSiderBarType = computed<LevelSiderBarType>(() => {
  if (!region.value?.node_L1?.length)
    return 'error'
  if (!region.value?.node_L2?.length)
    return 'warning'
  return undefined
})

interface IEmits {
  (event: 'nodeClick', node: CascaderNodeModel): void
}
</script>

<template>
  <div
    class="cascader-level-card"
    :class="{
      'cascader-level-card--tips cascader-level-card--error':
        levelSiderBarType === 'error',
      'cascader-level-card--tips cascader-level-card--warning':
        levelSiderBarType === 'warning',
    }"
  >
    <div class="level-card__title">
      <span class="level-card__title-text">
        {{ region.region_name }}
      </span>
    </div>
    <div class="level-card__body">
      <level-sider-bar :type="levelSiderBarType" />
      <div class="levels-wrapper">
        <level-row
          :region="region"
          :nodes="region?.node_L1 || []"
          :level="1"
          @node-click="node => emit('nodeClick', node)"
        />
        <level-row
          :region="region"
          :nodes="region?.node_L2 || []"
          :level="2"
          @node-click="node => emit('nodeClick', node)"
        />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.cascader-level-card {
  display: flex;
  flex-direction: column;
  & + .cascader-level-card {
    margin-top: var(--cdn-cascader-region-gap);
  }
  &:hover {
    :deep(.drag-dot) {
      display: inline-block;
      opacity: 1;
    }
  }
  .level-card__title {
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: bold;
    line-height: 17px;
    height: 17px;
    overflow: hidden;
    color: var(--cdn-cascader-color-text-1);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .level-card__body {
    display: flex;
    column-gap: var(--cdn-cascader-level-gap);
    .levels-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      row-gap: var(--cdn-cascader-level-gap);
    }
  }
}
</style>
